<template>
  <div class="shareStatistics">
    <div class="title">
      <h3>商户分成金额收益统计</h3>
    </div>
    <div class="el-div-info">
      <el-col :span="4" class="info-box" style="background: #32C5D2;">
        <el-col :span="20" class="space">商户分成收益金额</el-col>
        <el-col :span="20" class="space">￥77</el-col>
      </el-col>
      <el-col :span="4" class="info-box el-col-offset-2" style="background: #5395C3;">
        <el-col :span="20" class="space">商户待结算金额</el-col>
        <el-col :span="20" class="space">￥67</el-col>
      </el-col>
    </div>
    <div class="share-table">
      <el-form :model="form">
        <div class="ele-div-keysearch">
          <div class="search-left">
            <el-date-picker
              v-model="form.year"
              type="year"
              placeholder="选择年"
            />
            <el-date-picker
              v-model="form.month"
              type="month"
              placeholder="选择月"
            />
          </div>
          <div class="search-right search-flex">
            <div class="ele-input">
              <el-input v-model="form.businessName" suffix-icon="el-icon-search" placeholder="输入商户名称搜索" />
            </div>
            <el-button type="primary">搜索</el-button>
          </div>
        </div>
      </el-form>
      <div class="ele-table">
        <el-table :data="BindData" stripe>
          <el-table-column label="商户" prop="business" />
          <el-table-column label="应分成金额" prop="shareAmount" />
          <el-table-column label="在线销售商品" prop="onlineCommodity" />
          <el-table-column label="链条锁商品" prop="chainCommodity" />
          <el-table-column label="附加扣除" prop="deduct" />
          <el-table-column label="附加增加" prop="add" />
          <el-table-column label="计算日期" prop="calculateDate" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="text"
                plain
                @click="addOther()"
              >增加附加项</el-button>&nbsp;
              <el-button
                type="text"
                plain
                @click="viewDetails(scope,'detail')"
              >查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-div-footer">
          <div class="footer-left" />
          <el-pagination
            class="pagination-right"
            :page-sizes="[15, 20, 25, 30]"
            :page-size="15"
            :total="400"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    <!-- 增加附加项 -->
    <el-dialog :visible.sync="dialogVisible" width="80%">
      <div slot="title" class="ele-dialog-title">选择门店</div>
      <el-form :model="form1">
        <div class="ele-div-content">
          <div class="content-left">
            <el-col :span="20"><span>附加新增</span></el-col>
            <el-row>
              <el-col :span="20" class="content-head content-space">
                <el-col :span="12">名称</el-col>
                <el-col :span="8">金额</el-col>
                <el-col :span="4">操作</el-col>
              </el-col>
              <el-col :span="20" class="content-space">
                <el-col :span="10"><el-input v-model="form1.addName" placeholder="输入名称" /></el-col>
                <el-col :span="6" class="el-col-offset-2"><el-input v-model="form1.addAmount" placeholder="金额输入" /></el-col>
                <el-col :span="4" class="el-col-offset-2"><el-button type="danger">删除</el-button></el-col>
              </el-col>
              <el-col :span="20">
                <el-button type="text">增加</el-button>
              </el-col>
            </el-row>
          </div>
          <div class="content-right">
            <el-col :span="20"><span>附加扣除</span></el-col>
            <el-row>
              <el-col :span="20" class="content-head content-space">
                <el-col :span="12">名称</el-col>
                <el-col :span="8">金额</el-col>
                <el-col :span="4">操作</el-col>
              </el-col>
              <el-col :span="20" class="content-space">
                <el-col :span="10"><el-input v-model="form1.deductName" placeholder="输入名称" /></el-col>
                <el-col :span="6" class="el-col-offset-2"><el-input v-model="form1.deductName" placeholder="金额输入" /></el-col>
                <el-col :span="4" class="el-col-offset-2"><el-button type="danger">删除</el-button></el-col>
              </el-col>
              <el-col :span="20">
                <el-button type="text">增加</el-button>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-form>
      <div class="footer">
        <el-button type="primary">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/** 商户分成金额收益统计 */
export default {
  name: 'ShareStatistics',
  data() {
    return {
      form: {},
      dialogVisible: false,
      form1: {},
      BindData: [
        {
          business: 'xx商户',
          shareAmount: '66',
          onlineCommodity: '30',
          chainCommodity: '33',
          deduct: '33',
          add: '33',
          calculateDate: '2020-11'
        }
      ]
    }
  },
  methods: {
    /* 增加附加项*/
    addOther() {
      this.dialogVisible = true
    },
    /* 查看详情*/
    viewDetails(val, code) {
      this.$router.push('shareDetail')
    }
  }
}
</script>

<style lang="scss" scoped>
.shareStatistics {
  width: 100%;
  padding: 0px 50px;
  .el-div-info {
    margin: 20px 0px;
    height: 200px;

    .info-box {
      height: 150px;
      padding: 10px 20px;
      border-radius: 10px;
      margin-top: 20px;
      color: #FFFFFF;

      .space {
        margin: 20px 0px;
      }

      .button-space {
        margin-top: 10px;
      }
    }
  }
  .ele-div-keysearch {
    display: flex;
    justify-content: space-between;
    .search-left {
      display: flex;
      ::v-deep.el-date-editor,
      .ele-input,
      .el-button {
        margin-left: 15px;
      }
    }
    .search-flex {
      display: flex;
      ::v-deep.el-button {
        margin-left: 15px;
      }
    }
  }
  .ele-table {
    width: 100%;
    margin-top: 40px;
    .ele-div-footer {
      display: flex;
      justify-content: space-between;
      margin: 50px 0px 100px 0px;
    }
  }
  .ele-div-content{
    margin-top: -30px;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    .content-head{
      background: #F3F3F3;
    }
    .content-space{
      margin: 5px 0;
      line-height: 36px;
      height: 36px;
    }
  }
  .footer{
    text-align: center;
    ::v-deep.el-button{
      width: 300px;
    }
  }
}
</style>
